<template>
  <div class="date-picker">
    <el-radio-group
      :size="size"
      @change="handleChange"
      class="btn-radio"
      v-model="select"
    >
      <template v-if="type === 'text'">
        <el-radio :key="key" :label="key" v-for="(value, key) of options">{{
          value
        }}</el-radio>
      </template>

      <template v-if="type === 'button'">
        <el-radio-button
          :key="key"
          :label="key"
          v-for="(value, key) of options"
          >{{ value }}</el-radio-button
        >
      </template>

      <el-radio-button v-if="search">{{ search }}</el-radio-button>
    </el-radio-group>
    <el-date-picker
      :clearable="clearable"
      :picker-options="{ firstDayOfWeek: 1 }"
      :size="size"
      @change="pickerChange"
      class="margin-left"
      end-placeholder="结束日期"
      range-separator="~"
      start-placeholder="开始日期"
      type="daterange"
      v-model="searchTime"
      v-show="showSelector"
      value-format="yyyy-MM-dd"
    ></el-date-picker>
  </div>
</template>

<script>
/* eslint-disable no-underscore-dangle */

import vModelMixins from "../../mixins/vModelMixins";

export default {
  name: "date-picker",
  mixins: [vModelMixins],
  props: {
    size: {
      type: String
    },
    default: {
      type: String
    },
    type: {
      type: String,
      default: "text"
    },
    showPicker: {
      type: Boolean,
      default: true
    },
    // search模式
    search: {
      type: String
    },
    clearable: {
      type: Boolean,
      default: true
    },
    // 选项
    /* const options = {
      																	        all: "全部",
      																	        lastDay: "昨天",
      																	        today: "今天",
      																	        nextDay: "明天",
      																	        lastWeek: "上周",
      																	        thisWeek: "本周",
      																	        nextWeek: "下周",
      																	        lastMonth: "上月",
      																	        thisMonth: "本月",
      																	        nextMonth: "下月",
      																	        lastYear: "去年",
      																	        thisYear: "全年",
      																	        nextYear: "明年"
      																	      } */
    options: {
      type: Object,
      default: () => ({})
    },
    keyWords: {
      type: Array,
      default: () => ["startTime", "endTime"]
    }
  },
  data() {
    return {
      // form: {},
      searchTime: [],
      select: this.default
    };
  },
  computed: {
    showSelector() {
      if (this.search) return !this.select && this.search && this.showPicker;
      return this.showPicker;
    }
  },
  watch: {
    // select(val) {
    // 	if (!val && !this.search) return; //不是search 模式(没有undefined选项) 只重置选项 不重置 searchTime
    // 	this._initSearchTime();
    // 	console.log(123);
    // 	this.change();
    // },
    searchTime(val) {
      if (!val) {
        this.form[this.keyWords[0]] = undefined;
        this.form[this.keyWords[1]] = undefined;
      } else {
        this.form[this.keyWords[0]] = val[0];
        this.form[this.keyWords[1]] = val[1];
      }
      this.$emit("input", this.form);
    }
  },
  created() {
    this._initSearchTime();
  },
  methods: {
    // 重置
    reset() {
      this.select = "all";
    },
    handleChange() {
      if (!this.select && !this.search) return;
      // 不是search 模式(没有undefined选项) 只重置选项 不重置 searchTime
      this._initSearchTime();
      this.change();
    },
    change() {
      this.$emit("change");
    },
    pickerChange() {
      this.select = undefined; // 联动手动选择
      this.$emit("change");
    },
    _initSearchTime() {
      const val = this.select;
      // eslint-disable-next-line no-return-assign
      if (!val) return (this.searchTime = []);
      const ret = Util.getDate(val);
      this.searchTime = [
        Util.parseTime(ret[0], "{y}-{m}-{d}"),
        Util.parseTime(ret[1], "{y}-{m}-{d}")
      ];
    }
  }
};
</script>
